import React from "react";
import { locationTo } from "../utils/LocationUtil";
import ProgressView from "../view/ProgressView";
import styles from "../css/login.module.css";
import styles2 from '../css/my.module.css'
import service from "../service/LoginService";
import { setInfo,setTOKEN } from "../utils/StorageUtil";
import BaseScreen from "./BaseScreen";
import { checkPhone } from "../utils/RegUtil";
import InputView from "../view/inputView";
import { MyButton3 } from "../view/MyButton";
import { ENTER } from "../const/locations";
import Config from "../Config";
import LoginHeader from "../view/loginHeader";
class LoginScreen extends BaseScreen {
  componentDidMount() {
    document.title = "登录";
  }
  constructor(props) {
    super(props);
    this.state = {
      ...this.getDefaultState(),
      phone: "",
      password: "",
      check: true,
      loading: false,
      passwordType: "password"
    };
  }

  isVerify() {
    return false;
  }

  check(phone, password) {
    if (!phone) {
      this.showMsgDialog("手机号不能为空");
    } else if (!checkPhone(phone)) {
      this.showMsgDialog("请输入正确的手机号");
    } else if (!password || password.length < 6) {
      this.showMsgDialog("密码格式不正确");
    } else {
      this.onLogin(phone, password);
    }
  }

  changeValue() {
    this.check(this.refs.account.state.value, this.refs.password.state.value);
  }

  onLogin = (phone, password) => {
    let params = {
      phone: phone,
      password: password,
      // wechat_id: Config.SysFlag
    };
    this.setState({ loading: true });
    service
      .netLogin(params)
      .then(res => {
        this.setState({loading: false});
        if(res.error_code===0){
          setTOKEN(res.data.token);
          setInfo('UserInfo',res.data.user_info)
          locationTo(ENTER);
        } else if(res.error_code===105){
          this.showMsgDialog('帐号或密码错误')
        } 
      })
      .catch(err => {
        this.setState({ loading: false });
        // this.setState({
        //     warn: ee.message
        // })
      });
  };
  render() {
    const { loading } = this.state;
    return (
      <div className={styles2.homes} style={{background:Config.BaseColor}}>
        <div
          className={styles.login}
          // style={loginStyle}
        >
          <LoginHeader isLogin={true} />

          <div className={styles["info-content"]}>
            <InputView
              ref="account"
              className={styles["phoneNumber-content"]}
              placeholder="请输入手机号"
              label="手机号"
              value={this.state.phone}
              isClear={true}
              color='#fff'
              bgColor={Config.BaseColor}
            />
            <InputView
              className={styles["pwd-content"]}
              ref="password"
              type="password"
              placeholder="请输入您的密码，长度不小于8位"
              label="密码"
              isClear={false}
              color='#fff'
              bgColor={Config.BaseColor}
            />
           
            <MyButton3
              style={style}
              name={"登录"}
              onClick={() => {
                this.changeValue();
              }}
            />
             {/* <section className={styles["ps"]} style={FontColor}>
              <span
                onClick={() => {
                  locationTo(FORGOTPWD);
                }}
              >
                忘记密码?
              </span>
            </section> */}
          </div>
        </div>
        <div className={styles["loading"]}>
          {this.renderMsgDialog()}
          <ProgressView visibility={loading} mode={ProgressView.MODE_MEDIUM} color='#fff' />
        </div>
      </div>
    );
  }
}

const style = {
  marginTop: "4.125rem",
  backgroundColor:'#ffffff',
  color: Config.BaseColor,
};
// const loginStyle = {
//   // background: `url("${Config.loginBgAdress}") repeat-x`,
//   backgroundSize: "100% 50rem"
// };
// const iconStyle = {
//   // background: `url("${Config.iconAdress}") no-repeat`,
//   backgroundSize: "100% 100%"
// };
// const FontColor = { color: `#ffffff`, textAlign: "center" };
export default LoginScreen;
